<template>
<div>
    <div class= "detail-header" v-show= "showHeader" :style= "headerOpacity">
        <router-link tag= "span" to= "/" class="iconfont header-icon">&#xe624;</router-link>
        <div class= "detail-header-title">{{titleName}}</div>
    </div>
    <router-link to= "/" tag= "div" class="detail-header-leave" v-show= "!showHeader">
        <span class="iconfont home-ico-leave">&#xe624;</span>
    </router-link>
    <div class= "zhan"></div>
</div>
</template>
<script>
import axios from 'axios'
export default {
    name: 'detail-header',
    data() {
        return {
            //一开始不显示Header
            showHeader: false,
            headerOpacity: {
                opacity: 1
            }
        }
    },
    props: {
        sightName: String
    },
    methods: {
        handleScroll() {
            const top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
            console.log(top)
            if (top > 60) {
                let opacity = top / 140
                opacity = opacity > 1 ? 1 : opacity
                this.headerOpacity = { opacity: opacity }
                this.showHeader = true
            } else {
                this.showHeader = false
            }
        }
    },
    computed: {
        titleName() {
            let titleName = this.sightName.split(/\(/)[0]
            return titleName
        }
    },
    // 不能用activied，keepalive没有包裹
    mounted() {
        document.addEventListener('scroll', this.handleScroll)
    },
    destroyed() {
        document.removeEventListener('scroll', this.handleScroll)
    }
}
</script>
<style lang="stylus" scoped>
@import '../../../assets/styles/varibles.styl';/* 不能写在url中 */
*
    box-sizing border-box
    padding 0
    margin 0
    .detail-header-leave
        position fixed
        top 0
        left 0
        width .76rem
        height .76rem
        background: rgba(0, 0, 0, .4)
        text-align center
        color #fff
        border-radius 50%
        display flex
        align-items center
        justify-content center
    .detail-header
        // 令标题覆盖下面的详情
        z-index 2
        position fixed
        top 0
        left 0
        right 0
        line-height $headerHeight
        height $headerHeight
        display flex
        background $bgColor
        color #fff
        align-items center
        .detail-header-title
        // 宽度的一般20+30正好居中
            width 40%
            margin-left 30%
            line-height .62rem
            height .62rem
            text-align center
            font-size .32rem
</style>
